import { observable, action, computed } from 'mobx';
import { Container } from 'stores/models/core/nodeWithList';
import * as CONST from 'common/const';
import { backgroundImageExtendStyle } from 'common/utils/style';

export default class SliderPage extends Container {

  @observable backgroundColor = '#DDD';
  @observable backgroundImage = '//img.alicdn.com/imgextra/i2/1862941194/TB2z_6lwB8lpuFjSspaXXXJKpXa-1862941194.jpeg';
  @observable backgroundImageFillMode = 'cover'; // repeat 平铺, cover 覆盖, full 拉伸
  @observable opacity = 100;

  constructor(props) {
    super(props);

    this.init({
      props: {
        icon: 'icon-carousel',
        type: 'sliderPage',
        label: '轮播内页',
      },
    });
  }

  @computed get width() {
    return this.parent.width;
  }
  @computed get height() {
    return this.parent.height;
  }

  @computed get style() {
    return {
      width: this.width,
      height: this.height,
      opacity: this.opacity / 100,
      backgroundColor: this.backgroundColor,
      ...backgroundImageExtendStyle(this.backgroundImage, this.backgroundImageFillMode),
    };
  }

  // 更改页面高度
  @action setHeight(val) {
    this.parent.setHeight(val);
  }
}
